import React from 'react';
import { Button } from 'antd';
import { PlusOutlined, ReloadOutlined } from '@ant-design/icons';

export interface EmptyStateProps {
  title?: string;
  description?: string;
  image?: string;
  imageAlt?: string;
  showAction?: boolean;
  actionText?: string;
  actionIcon?: React.ReactNode;
  onAction?: () => void;
  className?: string;
}

const EmptyState: React.FC<EmptyStateProps> = ({
  title = '暂无数据',
  description = '当前没有任何内容，您可以尝试刷新页面或添加新内容',
  image,
  imageAlt = '空状态图片',
  showAction = true,
  actionText = '刷新页面',
  actionIcon = <ReloadOutlined />,
  onAction,
  className = '',
}) => {
  const defaultImage = (
    <svg
      className="w-24 h-24 mx-auto text-gray-300"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={1}
        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
      />
    </svg>
  );

  return (
    <div className={`flex flex-col items-center justify-center py-12 px-6 text-center ${className}`}>
      {/* 图片/图标 */}
      <div className="mb-6">
        {image ? (
          <img
            src={image}
            alt={imageAlt}
            className="w-24 h-24 mx-auto object-contain"
          />
        ) : (
          defaultImage
        )}
      </div>

      {/* 标题 */}
      <h3 className="text-lg font-semibold text-gray-900 mb-2">
        {title}
      </h3>

      {/* 描述 */}
      <p className="text-gray-600 mb-6 max-w-md leading-relaxed">
        {description}
      </p>

      {/* 操作按钮 */}
      {showAction && onAction && (
        <Button
          type="primary"
          icon={actionIcon}
          onClick={onAction}
          size="large"
          className="btn-primary"
        >
          {actionText}
        </Button>
      )}
    </div>
  );
};

// 预设的空状态组件
export const EmptyProduct: React.FC<Partial<EmptyStateProps>> = (props) => (
  <EmptyState
    title="暂无产品"
    description="当前没有找到相关产品，请尝试调整搜索条件或浏览其他分类"
    showAction={false}
    {...props}
  />
);

export const EmptyCase: React.FC<Partial<EmptyStateProps>> = (props) => (
  <EmptyState
    title="暂无案例"
    description="当前没有找到相关案例，请尝试调整搜索条件或浏览其他行业分类"
    showAction={false}
    {...props}
  />
);

export const EmptySearch: React.FC<Partial<EmptyStateProps>> = (props) => (
  <EmptyState
    title="未找到相关内容"
    description="请尝试调整搜索条件或清空筛选器"
    actionText="清空筛选"
    actionIcon={<ReloadOutlined />}
    {...props}
  />
);

export const EmptyError: React.FC<Partial<EmptyStateProps>> = (props) => (
  <EmptyState
    title="加载失败"
    description="数据加载失败，请检查网络连接后重试"
    actionText="重新加载"
    actionIcon={<ReloadOutlined />}
    {...props}
  />
);

export default EmptyState;